<template>
    <!-- 这是首页导航栏 -->
  <div class="header">
    <!-- 左侧导航 -->
    <!-- 学生 首页 课程 向老师 -->
    <div class="navbar">
      <!-- <div @click="$router.push({name:'AdminHome'})">首页</div> -->
      <!-- admin/Admin -->
      <div @click="$router.push({name:'AccountMgmt'})" style="width: 150px;">学生账号管理</div>
      <div @click="$router.push({name:'Announcement'})">发布公告</div>
      <div @click="$router.push({name:'TeacherMgmt'})">教师管理</div>
      <!-- <div @click="$router.push({name:'CourseMgmt'})">课程管理</div> -->
    </div>

    <!-- 右侧导航 -->
    <div class="navbarRight">
      <div>
        <img class="titleImg" src="http://localhost:8085/file/profilePic/admin.png">
      </div>

      <div class="quit">
        <el-tooltip effect="light" content="退出登录">
          <img src="/src/assets/svg/logout.svg" class="tuichu" @click="quit()">
        </el-tooltip>
      </div>
    </div>
  </div>


<!-- 设置弹出框------------------- -->
<el-drawer v-model="drawer" :with-header="false" size="40%" style="border-radius: 20px 0 0 20px;">
    <!-- 通知栏组件 -->
    <notice></notice>
</el-drawer>

</template>

<script setup>
import { ref } from "vue";
import useUserStore from "@/stores/useUserStore";
import Notice from "./Notice.vue";
import { useRouter } from "vue-router";
import { openInfo } from "@/utils/openInfo";
const router = useRouter()
const userStore = useUserStore()
// 通知弹出框
const drawer = ref(false)

//t退出登录
function quit(){
  userStore.removeUserInfo()
  router.push({name:"LoginRegister"})
  openInfo("退出登录成功")
  
}


</script>

<style scoped>
/* 整条导航栏 */
.header {
  height: 50px;
  position: sticky;
  top: 1px; /* 元素将粘在页面顶部 */
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
  backdrop-filter: blur(5px); /*模糊 */
  z-index: 10;
  background-color: rgba(220, 245, 245, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px rgba(255, 251, 226, 0.2) solid;
}
/* 左侧导航 */
.navbar {
  width:60%;
  display: flex;
}

/* 左侧每一项导航 */
.navbar div {
  height: 50px;
  width: 120px;
  min-width: 100px;
  color: #434746;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  font-family: "楷体";
  transition: font-size 0.5s ease;
  /* 使div中的内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /*变手指 */
  user-select: none;/*无法选中 */
}
/* 左侧每一项导航 鼠标触碰效果 */
.navbar div:hover {
  font-size: 24px;
}


/* 导航栏右侧 */
.navbarRight{
    display: flex;
    justify-content: center;
    align-items: center;
}

.quit{
margin-right: 15px;
}
/* 关闭弹窗键 */
.tuichu {
  transition: transform 0.3s ease;
  cursor: pointer;
  margin-left: 10px;
}

.tuichu:hover {
  transform: scale(1.2);
}

/* 头像 */
.titleImg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 10px;
}
</style>